* {
    margin: 0;
    padding: 0;
}
.container {
    width: 100vw;
    height: 100vh;
    // 设置滚动贴合的方式：沿Y轴滚动，mandatory表示强制滚动。
    // 需要把滚动条设置到直接父容器，scroll-snap-type才能生效
    scroll-snap-type: y mandatory;
    overflow-y: scroll;
    overflow-x: hidden;

    div {
        width: 100vw;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 200px;
        color: #fff;
        scroll-snap-align: start;
        &:nth-child(1) {
            background-color: lightcoral;
        }
        &:nth-child(2) {
            background-color: lightseagreen;
        }
        &:nth-child(3) {
            background-color: lightsalmon;
        }
        &:nth-child(4) {
            background-color: lightskyblue;
        }
    }
}
